<!DOCTYPE html>
<html class="iframe-h">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网站后台管理模版</title>
    <link rel="stylesheet" type="text/css" href="/public/static/admin/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/admin/css/admin.css" />
    <meta name="referrer" content="no-referrer" />
    <!-- 头部403 -->
    <script src="/public/static/admin/js/jquery.js"></script>
    <script src="/public/static/button.js" type="text/javascript" charset="utf-8">
    </script>
    <style>
        body .layer-test {
            background: none;
            box-shadow: none;
        }
        /* 定制化 */
        
        html .layui-layer-demo {
            background-color: #eee;
        }
        
        .layui-layer-demo .layui-layer-title {
            border: none;
            background-color: #333;
            color: #fff;
        }
        
        .long-hidde {
            /* 超出隐藏 */
            width: 20%;
            /* 要显示文字的宽度 */
            float: left;
            /* 左对齐，不设置的话只在IE下好用 */
            overflow: hidden;
            /* 超出的部分隐藏起来 */
            white-space: nowrap;
            /* 不显示的地方用省略号...代替 */
            text-overflow: ellipsis;
            /* 支持 IE */
            -o-text-overflow: ellipsis;
            /* 支持 Opera */
        }
    </style>
    <script src="/public/static/admin/js/layer/layer.js"></script>
</head>

<body>
    <div class="wrap-container clearfix">
        <div class="column-content-detail">
            <form class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline tool-btn">
                        <button type="button" class="layui-btn layui-btn-small layui-btn-warm abnormal-area hidden-xs">
							<i class="iconfont">&#xe601;</i>
						</button>
                    </div>
                    <div class="layui-inline">
                        <input type="text" id="select_title" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <select id="states" lay-filter="status">
							<option value="0">正常</option>
							<option value="1">待审核</option>
							<option value="2">已删除</option>
						</select>
                    </div>
                    <button class="layui-btn layui-btn-normal condition-search" type="button">筛选</button>
                </div>

            </form>
            <div class="layui-form" id="table-list">
                <table class="layui-table" lay-even lay-skin="nob">
                    <colgroup>
                        <col width="50">
                        <col class="hidden-xs" style="max-width: 70;">
                        <col class="hidden-xs" style="max-width: 100;">
                        <col>
                        <col class="hidden-xs" style="max-width: 150;">
                        <col class="hidden-xs" style="max-width: 150;">
                        <col class="hidden-xs" style="max-width: 150;">
                        <col class="hidden-xs" style="max-width: 150;">
                        <col style="max-width: 80;">
                        <col style="max-width: 170;">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose">
                            </th>
                            <th style="text-align:center;" class="hidden-xs">缩略图</th>
                            <th style="text-align:center;">名称</th>
                            <th style="text-align:center;">作者</th>
                            <th style="text-align:center;" class="hidden-xs">ID</th>
                            <th style="text-align:center;" class="hidden-xs">标签</th>
                            <th style="text-align:center;" class="hidden-xs">分类</th>
                            <th style="text-align:center;" class="hidden-xs">创建时间</th>
                            <th style="text-align:center;">状态</th>
                            <th style="text-align:center;">操作</th>
                            <th style="text-align:center;">备注</th>
                        </tr>
                    </thead>
                    <tbody name='comicsList'>
                        {volist name='comicsList' id='comics_List'}
                        <tr>
                            <td>
                                <input type="checkbox" name="" lay-skin="primary" data-id="{$comics_List.id}">
                            </td>
                            <td class="hidden-xs">
                                <img width="150" src="{$springboard}{$comics_List.file_server}{$comics_List.path}">
                            </td>
                            <td>{$comics_List.title}</td>
                            <td>{$comics_List.author}</td>
                            <td class="hidden-xs" title="{$comics_List._id}">鼠标悬浮查看</td>
                            <td class="hidden-xs">{:generateTags($comics_List.tags)}</td>
                            <td align="center" class="hidden-xs">{:generateTags($comics_List.categories)}</td>
                            <!-- 这里有两个办法 通过服务器返回 或者通过调用js里的返回  -->
                            <td class="hidden-xs">{:iSO_8601ToNewData($comics_List.created_at)}</td>
                            <td>
                                <button class="layui-btn layui-btn-mini layui-btn-normal">正常</button>
                            </td>
                            <td>
                                <div class="layui-inline" data-book-id="{$comics_List._id}" data-title="{$comics_List.title}">
                                    <button title="章节操作" class="layui-btn layui-btn-small layui-btn-normal get-comics-son-project">
										<i style="color: #fff;" class="layui-icon">&#xe60a;</i>
									</button>
                                    <button title="编辑信息" class="layui-btn layui-btn-small layui-btn-normal edit-comics">
										<i class="layui-icon">&#xe642;</i>
									</button>
                                    <button title="删除" class="layui-btn layui-btn-small layui-btn-danger delete-comics" data-url="article-detail.html">
										<i class="layui-icon">&#xe640;</i>
									</button>
                                </div>
                            </td>
                            <td>
                                无备注
                            </td>
                        </tr>
                        {/volist}
                    </tbody>
                </table>
                <div name='page_list'>
                    {:generatePaging($ComicsListCount,$page)}
                </div>
                <!-- <div class="page-wrap">
					<ul class="pagination">
						<li class="disabled">
							<span>«</span>
						</li>
						<li class="active">
							<span>1</span>
						</li>
						<li>
							<a href="#">2</a>
						</li>
						<li>
							<a href="#">»</a>
						</li>
					</ul>
				</div> -->

            </div>
        </div>
    </div>
    <script src="/public/static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/public/static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script src="/public/static/admin/js/main.js" type="text/javascript" charset="utf-8"></script>

    <script>
        var controller = "{$url}useradmin/"; //当前控制器路径
        //编辑文章点击事件
        $(document).on("click", "button.edit-comics", function() {
                bookId = $(this).parent().attr('data-book-id');
                var title = $(this).parent().attr('data-title');
                window.parent.InsertNewTab(
                    "编辑文章 - " + title,
                    controller + 'EditComicsInfo',
                    "edit-comics-", bookId, {
                        extendsParameter: {
                            'HiddenFrom': true,
                            'FromType': "EditComicsInfo",
                            'FromParameter': {
                                "bookId": bookId,
                            }
                        }
                    });
            })
            //编辑漫画获取漫画子章节
        $(document).on("click", "button.get-comics-son-project", function() {
            bookId = $(this).parent().attr('data-book-id');
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{$url}useradmin/getComicsSonProject",
                data: {
                    'bookId': bookId, //书籍id
                },
                success: function(response) {
                    // $listBottom = '';
                    $list = '';
                    $str = '';
                    $.each(response.comicsSonProject, function(i, v) {
                        console.log(v
                            .chapter_id);
                        /* $listBottom +=
                        	'<botton title=' + v.title + ISO8601DateStr2Date(v.updated_at) +
                        	' data-project-id=' + v
                        	.chapter_id + //分卷id
                        	' class="layui-btn layui-btn-primary" ' +
                        	' data-book-id=' + bookId +
                        	' style="margin-left:5px;margin-top:5px;" lay-submit="" lay-filter="formDemo">' +
                        	v.project_title + '</botton>'; */
                        $str = 'data-project-id=' + v
                            .chapter_id + //分卷id
                            ' data-book-id=' + bookId +
                            ' data-project-title=' + v.project_title +
                            ' data-project-order=' + v.order;
                        $list += '<tr>' +
                            '<td style="text-align:center;"  class="hidden-xs">' + v.order +
                            '</td>' +
                            '<td>' + v.project_title + '</td>' +
                            '<td>' + ISO8601DateStr2Date(v.updated_at) + '</td>' +
                            '<td><button class="layui-btn layui-btn-mini layui-btn-normal table-list-status" data-status="1">显示</button></td>' +
                            '<td>' +
                            '<div class="layui-inline">' +
                            '<button ' + $str +
                            ' class="layui-btn layui-btn-mini layui-btn-normal bottin-comics-son-project ">' +
                            '<i class="layui-icon"></i>' +
                            '</button>' +
                            '<button ' + $str +
                            ' class="layui-btn layui-btn-mini layui-btn-danger" >' +
                            '<i class="layui-icon"></i>' +
                            '</button>' +
                            '</div>' +
                            '</td>' +
                            '</tr>';
                    });
                    layer.open({
                        type: 0,
                        skin: 'layui-layer-demo', //样式类名
                        closeBtn: 0, //不显示关闭按钮
                        anim: 2,
                        maxWidth: '85%',
                        maxHeight: '50%',
                        // area: ['50%', '50%'],
                        shadeClose: false, //开启遮罩关闭
                        content:
                        /* '<div style="max-width:100%">' +
                        '<li style="text-align:center;" class="layer-area">' +
                        '<button style="width:100%;" data-book-id=' + bookId +
                        ' class="layui-btn layui-btn-normal add-project" lay-submit="search">创建漫画</button>' +
                        '<div style="text-align:center;">请选择要查看的章节</div>' +
                        $listBottom +
                        '</li>' +
                        '</div>' */
                            '<div class="layui-form-item">' +
                            '<div class="layui-inline tool-btn">' +
                            '<button class="layui-btn layui-btn-small layui-btn-normal go-btn hidden-xs" data-url="danye-detail.html"><i class="layui-icon"></i></button>' +
                            '<button class="layui-btn layui-btn-small layui-btn-warm listOrderBtn hidden-xs" data-url="/admin/category/listorderall.html"><i class="iconfont"></i></button>' +
                            '</div>' +
                            '<div class="layui-inline">' +
                            '<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">' +
                            '</div>' +
                            '<button class="layui-btn layui-btn-normal" lay-submit="search">搜索</button>' +
                            '</div>' +
                            '<div class="layui-form" id="table-list">' +
                            '<table class="layui-table" lay-even="" lay-skin="nob">' +
                            '<colgroup>' +
                            '<col class="hidden-xs" width="100">' +
                            '<col>' +
                            '<col class="hidden-xs" width="200">' +
                            '<col width="80">' +
                            '<col width="150">' +
                            '</colgroup>' +
                            '<thead>' +
                            '<tr>' +
                            '<th style="text-align:center;"  class="hidden-xs">排序</th>' +
                            '<th>分卷名</th>' +
                            '<th>创建时间</th>' +
                            '<th>状态</th>' +
                            '<th>操作</th>' +
                            '</tr>' +
                            '</thead>' +
                            '<tbody>' +
                            '<tr class="add-project-tr">' +
                            '<td colspan="7" style="text-align:center;"><button style="width:100%;" class="add-project-button layui-btn layui-btn-fluid layui-btn-normal table-list-status" data-book-id=' +
                            bookId +
                            '>创建分卷</button></td>' +
                            '</tr>' +
                            $list +
                            '</tbody>' +
                            '</table>' +
                            '<div class="page-wrap">' +
                            '<ul class="pagination">' +
                            '<li class="disabled"><span>«</span></li>' +
                            '<li class="active"><span>1</span></li>' +
                            '<li>' +
                            '<a href="#">2</a>' +
                            '</li>' +
                            '<li>' +
                            '<a href="#">»</a>' +
                            '</li>' +
                            '</ul>' +
                            '</div>' +
                            '</div>',
                    });
                }
            });
        });


        /**
         * 跳转页面
         */
        function locationHref($page, $title = undefined, $status = 0) { //获取下一页

            var index = layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: false,
                skin: 'layer-test',
                content: '<div><img width="150" src="https://i0.hdslb.com/bfs/album/7f85abf4f2c87b70589e4b5a0b1d8fb340c0f2d4.gif"> <h1 style="text-align:center;font-size:30px;color:rgb(255,255,255);">拼命加载中</h1></div>'
            });
            $.ajax({
                type: "get",
                url: "{$url}useradmin/getComicsList",
                data: {
                    "page": $page,
                    "title": $title,
                    "status": $status,
                },
                dataType: "Json",
                success: function(response) {
                    $("div[name='page_list']").html(response.page);
                    $("tbody[name='comicsList']").empty();
                    $.each(response.comicsList, function(i, v) {
                        console.log(v);
                        if (v.state == 0) {
                            switch (v.exp_state) { //1待站长审核 2 被删除
                                case 1:
                                    $msg = '待审核'
                                    $expButton =
                                        '<button title="删除漫画" class="layui-btn layui-btn-small layui-btn-normal delete-comics"' +
                                        'data-id="' + v._id + '" data-title="' + v.title +
                                        '" >' +
                                        '<i class="layui-icon">&#xe642;</i>' +
                                        '</button>';
                                    break;
                                case 2:
                                    $msg = '被删除'
                                    $expButton =
                                        '<br><button title="恢复漫画" class="layui-btn layui-btn-small layui-btn-normal recovery-comics">' +
                                        '<i class="iconfont">&#xe60d;</i>' +
                                        '</button>' +
                                        '<button title="永久删除" class="layui-btn layui-btn-small layui-btn-danger enter-delete-comics">' +
                                        '<i class="iconfont">&#xe601;</i>' +
                                        '</button>';
                                    break;

                                default:
                                    $msg = '未定义'
                                    $expButton = '';
                                    break;
                            }
                        } else {
                            $msg = '正常'
                            $expButton =
                                '<button title="删除" class="layui-btn layui-btn-small layui-btn-danger delete-comics"' +
                                'data-id="' + v._id + '">' +
                                '<i class="layui-icon">&#xe640;</i>' +
                                '</button>';

                        }
                        $("tbody[name='comicsList']").append(
                            '<tr>' +
                            '<td>' +
                            '<input type="checkbox" name="1" lay-skin="primary" data-id="' + v._id +
                            '">' +
                            '</td>' +
                            '<td class="hidden-xs">' +
                            '<img width="150"' +
                            'src="{$springboard}' + v.file_server + v.path +
                            '">' +
                            '</td>' +
                            '<td>' + v.title + '</td>' +
                            '<td class="hidden-xs">' + v.author + '</td>' +
                            '<td class="hidden-xs" title="' + v._id + '">鼠标悬浮查看</td>' +
                            '<td class="hidden-xs">' + generateTags(v.tags) +
                            '</td>' +
                            '<td class="hidden-xs">' + generateTags(v.categories) +
                            '</td>' +
                            '<td class="hidden-xs">' + ISO8601DateStr2Date(v.created_at) +
                            '</td>' +
                            '<td>' +
                            '<button class="layui-btn layui-btn-mini layui-btn-normal">正常</button>' +
                            '</td>' +
                            '<td style="text-align:center;">' +
                            '<div data-book-id="' + v._id + '" data-title="' + v.title +
                            '" class="layui-inline">' +
                            '<button title="分卷列表" class="layui-btn layui-btn-small layui-btn-normal get-comics-son-project">' +
                            '<i style="color: #fff;" class="layui-icon">&#xe60a;</i>' +
                            '</button>' +
                            '<button title="编辑漫画" class="layui-btn layui-btn-small layui-btn-normal edit-comics">' +
                            '<i class="layui-icon">&#xe642;</i>' +
                            '</button>' +
                            $expButton +
                            '</div>' +
                            '</td>' +
                            '<td>' + $msg +
                            '</td>' +
                            '</tr>'
                        );
                    });
                    layer.close(index);
                }
            })
        }

        function generateTags($Tags) { //生成标签点击
            if ($Tags == '') {
                return '';
            }
            $explodeTags = $Tags.split(',');
            $returnInfo = "";
            $.each($explodeTags, function(i, v) {
                $returnInfo += "<a href='#" + v + "'>" + v + "</a>,";
            })
            $returnInfo = $returnInfo.substring(0, $returnInfo.length - 1);
            return $returnInfo;
        }

        function ISO8601DateStr2Date(string) { //iso8601转时间戳
            var regexp = "([0-9]{4})(-([0-9]{2})(-([0-9]{2})" +
                "(T([0-9]{2}):([0-9]{2})(:([0-9]{2})(\.([0-9]+))?)?" +
                "(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?";
            if (string) {
                var d = string.match(new RegExp(regexp));
                var offset = 0;
                var date = new Date(d[1], 0, 1);

                if (d[3]) {
                    date.setMonth(d[3] - 1);
                }
                if (d[5]) {
                    date.setDate(d[5]);
                }
                if (d[7]) {
                    date.setHours(d[7]);
                }
                if (d[8]) {
                    date.setMinutes(d[8]);
                }
                if (d[10]) {
                    date.setSeconds(d[10]);
                }
                if (d[12]) {
                    date.setMilliseconds(Number("0." + d[12]) * 1000);
                }
                if (d[14]) {
                    offset = (Number(d[16]) * 60) + Number(d[17]);
                    offset *= ((d[15] == '-') ? 1 : -1);
                }
                offset -= date.getTimezoneOffset();
                var time = (Number(date) + (offset * 60 * 1000)) / 1000;
                return formatDateTime(time);
            } else {
                return null;
            }

            function formatDateTime(timeStamp) { //时间戳转时间
                var date = new Date();
                date.setTime(timeStamp * 1000);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d + '&nbsp;' + h + ':' + minute + ':' + second;
            };

        }
    </script>
</body>

</html>